﻿<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>impression</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico" />

    <link rel="stylesheet" th:href="@{/assets/css/vendor/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/vendor/icofont.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/plugins/animate.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/swiper-bundle.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/nice-select.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/venobox.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <!--        <link rel="stylesheet" th:href="@{/assets/css/typo.css}">-->
    <link rel="stylesheet" th:href="@{/assets/prism/prism.css}">

</head>

<body>

    <main class="main-wrapper">
        <!-- .....:::::: Start Header Section :::::.... -->
        <header class="header-section sticky-header d-none d-lg-block">
            <div class="header-wrapper">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col">
                            <!-- Start Header Logo -->
                            <a href="index.html" class="header-logo">
                                <img src="assets/images/logo/logo.png" alt="">
                            </a>
                            <!-- End Header Logo -->
                        </div>

                        <div class="col-auto">
                            <!-- Start Header Menu -->
                            <ul class="header-nav">
                                <li><a th:href="@{/index}">首页</a></li>
                                <li class="has-dropdown">
                                    <a th:href="@{/skill}">我的技能</a>
                                </li>
                                <li class="has-dropdown">
                                    <a th:href="@{/blog}">博客</a>
                                </li>
                                <li><a th:href="@{/project}">项目</a></li>
                                <li class="has-dropdown">
                                    <a href="#">其它</a>
                                    <ul class="submenu">
                                        <li><a th:href="@{/about}">关于我</a></li>
<!--                                        <li><a th:href="@{/contact}">联系我</a></li>-->
                                    </ul>
                                </li>
                            </ul>

                            <!-- End Header Menu -->
                        </div>


                        <div class="col">
                            <div class="header-btn-link text-end">
                                <a th:href="@{/about}" class="btn btn-sm btn-outline-one icon-space-left"> About Me <i class="icofont-double-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- .....:::::: End Header Section :::::.... -->

        <!-- .....:::::: Start Mobile Header Section :::::.... -->
        <div class="mobile-header d-block d-lg-none">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col">
                        <div class="mobile-logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mobile-action-link text-end">
                            <a href="#mobile-menu-offcanvas" class="offcanvas-toggle offside-menu"><i class="icofont-navigation-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .....:::::: Start MobileHeader Section :::::.... -->

        <!--  Start Offcanvas Mobile Menu Section -->
        <div id="mobile-menu-offcanvas" class="offcanvas offcanvas-rightside offcanvas-mobile-menu-section">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header text-right">
                <button class="offcanvas-close"><i class="icofont-close-line"></i></button>
            </div> <!-- End Offcanvas Header -->
            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-mobile-menu-wrapper">
                <!-- Start Mobile Menu  -->
                <div class="mobile-menu-bottom">
                    <!-- Start Mobile Menu Nav -->
                    <div class="offcanvas-menu">
                        <ul>

                            <li><a th:href="@{/index}">首页</a></li>

                            <li>
                                <a th:href="@{skill}"><span>技能</span></a>

                            </li>
                            <li>
                                <a th:href="@{blog}" href="#"><span>博客</span></a>
                            </li>
                            <li><a th:href="@{/project}">项目</a></li>
                            <li>
                                <a th:href="@{about}"><span>关于我</span></a>
                            </li>
                        </ul>
                    </div> <!-- End Mobile Menu Nav -->

                </div> <!-- End Mobile Menu -->

                <!-- Start Mobile contact Info -->
                <div class="mobile-contact-info text-center">
                    <ul class="social-link">
                        <li><a target="_blank" href="https://example.com"><i class="icofont-facebook"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-twitter"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-skype"></i></a></li>
                    </ul>
                </div>
                <!-- End Mobile contact Info -->

            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div>
        <!-- ...:::: End Offcanvas Mobile Menu Section:::... -->

        <!-- Offcanvas Overlay -->
        <div class="offcanvas-overlay"></div>

        <!-- ...::: Start Breadcrumb Section :::... -->
        <div class="breadcrumb-section section-bg overflow-hidden pos-relative">
            <div class="breadcrumb-shape-top-left"></div>
            <div class="breadcrumb-shape-bottom-right"></div>
            <div class="breadcrumb-box">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb-content">
                                <h2 class="title">技能</h2>
                                <ul class="breadcrumb-link">
                                    <li><a th:href="@{/index}">首页</a></li>
                                    <li class="active" aria-current="page">我的技能</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Breadcrumb Section :::... -->

        <!-- ...::: Start Service List Section :::... -->
        <div class="service-list-section section-gap-tb-165">
            <div class="container">
                <div class="row mb-n6">
                    <div class="col-xl-4 col-md-6 col-12 mb-6" th:each="skill : ${skills}">
                        <!-- Start Service Single Item -->
                        <div class="service-box-single-item">
                            <div class="inner-shape inner-shape-top-right"></div>
                            <div class="icon"><img src="assets/images/icon/service-icon-1.png" alt=""></div>
                            <h4 class="title"><a th:href="@{ /skill/{skillId}/details(skillId = ${ skill.id }) }">[[${skill.name}]]</a></h4>
                            <ul class="list-item">
                                <li th:text="${skill.getTagOne()}">Landing Pages</li>
                                <li th:text="${skill.getTagTwo()}">User Flow</li>
                                <li th:text="${skill.getTagThree()}">Wireframing</li>
                                <li th:text="${skill.getTagFour()}">Prototyping</li>
                                <li th:text="${skill.getTagFive()}">Mobile App Design</li>
                            </ul>
                            <div class="inner-shape inner-shape-bottom-right"></div>
                        </div>
                        <!-- End Service Single Item -->
                    </div>
<!--                    <div class="col-xl-4 col-md-6 col-12 mb-6">-->
<!--                        &lt;!&ndash; Start Service Single Item &ndash;&gt;-->
<!--                        <div class="service-box-single-item">-->
<!--                            <div class="inner-shape inner-shape-top-right"></div>-->
<!--                            <div class="icon"><img src="assets/images/icon/service-icon-2.png" alt=""></div>-->
<!--                            <h4 class="title"><a href="skill-details.html">Development</a></h4>-->
<!--                            <ul class="list-item">-->
<!--                                <li>HTML/CSS</li>-->
<!--                                <li>JavaScript</li>-->
<!--                                <li>Animation</li>-->
<!--                                <li>WordPress</li>-->
<!--                                <li>React</li>-->
<!--                            </ul>-->
<!--                            <div class="inner-shape inner-shape-bottom-right"></div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash; End Service Single Item &ndash;&gt;-->
<!--                    </div>-->
<!--                    <div class="col-xl-4 col-md-6 col-12 mb-6">-->
<!--                        &lt;!&ndash; Start Service Single Item &ndash;&gt;-->
<!--                        <div class="service-box-single-item">-->
<!--                            <div class="inner-shape inner-shape-top-right"></div>-->
<!--                            <div class="icon"><img src="assets/images/icon/service-icon-3.png" alt=""></div>-->
<!--                            <h4 class="title"><a href="skill-details.html">Illustration</a></h4>-->
<!--                            <ul class="list-item">-->
<!--                                <li>Character Design</li>-->
<!--                                <li>Icon Set</li>-->
<!--                                <li> Illustration Guide</li>-->
<!--                                <li>Illustration Set</li>-->
<!--                                <li>Motion Graphic</li>-->
<!--                            </ul>-->
<!--                            <div class="inner-shape inner-shape-bottom-right"></div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash; End Service Single Item &ndash;&gt;-->
<!--                    </div>-->
<!--                    <div class="col-xl-4 col-md-6 col-12 mb-6">-->
<!--                        &lt;!&ndash; Start Service Single Item &ndash;&gt;-->
<!--                        <div class="service-box-single-item">-->
<!--                            <div class="inner-shape inner-shape-top-right"></div>-->
<!--                            <div class="icon"><img src="assets/images/icon/service-icon-4.png" alt=""></div>-->
<!--                            <h4 class="title"><a href="skill-details.html">SEO Marketing</a></h4>-->
<!--                            <ul class="list-item">-->
<!--                                <li>White Hat SEO</li>-->
<!--                                <li>Black Hat SEO</li>-->
<!--                                <li>Grey Hat SEO</li>-->
<!--                                <li> Negative SEO</li>-->
<!--                                <li> On-Page SEO</li>-->
<!--                            </ul>-->
<!--                            <div class="inner-shape inner-shape-bottom-right"></div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash; End Service Single Item &ndash;&gt;-->
<!--                    </div>-->
<!--                    <div class="col-xl-4 col-md-6 col-12 mb-6">-->
<!--                        &lt;!&ndash; Start Service Single Item &ndash;&gt;-->
<!--                        <div class="service-box-single-item">-->
<!--                            <div class="inner-shape inner-shape-top-right"></div>-->
<!--                            <div class="icon"><img src="assets/images/icon/service-icon-5.png" alt=""></div>-->
<!--                            <h4 class="title"><a href="skill-details.html">Data Analysis</a></h4>-->
<!--                            <ul class="list-item">-->
<!--                                <li>Diagnostic Analysis</li>-->
<!--                                <li>Predictive Analysis</li>-->
<!--                                <li>Prescriptive Analysis</li>-->
<!--                                <li>Risk Assessment</li>-->
<!--                                <li>Sales Forecasting</li>-->
<!--                            </ul>-->
<!--                            <div class="inner-shape inner-shape-bottom-right"></div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash; End Service Single Item &ndash;&gt;-->
<!--                    </div>-->
<!--                    <div class="col-xl-4 col-md-6 col-12 mb-6">-->
<!--                        &lt;!&ndash; Start Service Single Item &ndash;&gt;-->
<!--                        <div class="service-box-single-item">-->
<!--                            <div class="inner-shape inner-shape-top-right"></div>-->
<!--                            <div class="icon"><img src="assets/images/icon/service-icon-6.png" alt=""></div>-->
<!--                            <h4 class="title"><a href="skill-details.html">Brand Identity</a></h4>-->
<!--                            <ul class="list-item">-->
<!--                                <li>Brand Architecture</li>-->
<!--                                <li> Brand Authenticity</li>-->
<!--                                <li>Brand Awareness</li>-->
<!--                                <li>Brand Management</li>-->
<!--                                <li>Brand Metrics</li>-->
<!--                            </ul>-->
<!--                            <div class="inner-shape inner-shape-bottom-right"></div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash; End Service Single Item &ndash;&gt;-->
<!--                    </div>-->
                </div>
            </div>
        </div>
        <!-- ...::: End Service List Section :::... -->

        <!-- ...::: Start Counter Display Section :::... -->
<!--        <div class="counter-display-section section-gap-tb-165 section-bg-2">-->
<!--            <div class="counter-display-wrapper">-->
<!--                <div class="container">-->
<!--                    <div class="row justify-content-center justify-content-sm-start">-->
<!--                        <div class="d-block d-md-flex justify-content-md-start col-12 col-sm-4 col-md-4">-->
<!--                            &lt;!&ndash; Start Counterup Single Item &ndash;&gt;-->
<!--                            <div class="counterup-single-item">-->
<!--                                <div class="icon">-->
<!--                                    <img src="assets/images/icon/counterup-icon-1.png" alt="">-->
<!--                                </div>-->
<!--                                <div class="content">-->
<!--                                    <h2 class="number"><span class="counter">2,58</span>+</h2>-->
<!--                                    <span class="text">Happy Clients</span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Counterup Single Item &ndash;&gt;-->
<!--                        </div>-->
<!--                        <div class="d-block d-md-flex justify-content-md-center col-12 col-sm-4 col-md-4">-->
<!--                            &lt;!&ndash; Start Counterup Single Item &ndash;&gt;-->
<!--                            <div class="counterup-single-item">-->
<!--                                <div class="icon">-->
<!--                                    <img src="assets/images/icon/counterup-icon-2.png" alt="">-->
<!--                                </div>-->
<!--                                <div class="content">-->
<!--                                    <h2 class="number"><span class="counter">590</span>K</h2>-->
<!--                                    <span class="text">Project Complete</span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Counterup Single Item &ndash;&gt;-->
<!--                        </div>-->
<!--                        <div class="d-block d-md-flex justify-content-md-end col-12 col-sm-4 col-md-4">-->
<!--                            &lt;!&ndash; Start Counterup Single Item &ndash;&gt;-->
<!--                            <div class="counterup-single-item">-->
<!--                                <div class="icon">-->
<!--                                    <img src="assets/images/icon/counterup-icon-3.png" alt="">-->
<!--                                </div>-->
<!--                                <div class="content">-->
<!--                                    <h2 class="number"><span class="counter">28</span>+</h2>-->
<!--                                    <span class="text">Years of Experience</span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Counterup Single Item &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- ...::: End Counter Display Section :::... -->

        <!-- ...::: Start Company Logo Display Section :::... -->
<!--        <div class="company-logo-display  section-gap-tb-165">-->
<!--            <div class="company-logo-display-box">-->
<!--                <div class="container">-->
<!--                    <div class="row">-->
<!--                        <div class="col">-->
<!--                            &lt;!&ndash; Start Section Content &ndash;&gt;-->
<!--                            <div class="section-content pos-relative">-->
<!--                                <span class="section-tag">Favourite Clients</span>-->
<!--                                <h2 class="section-title">Work With Trusted Comapny.</h2>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Section Content &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="company-logo-display-wrapper">-->
<!--                        <div class="row">-->
<!--                            <div class="col">-->
<!--                                <div class="company-logo-display-slider">-->
<!--                                    &lt;!&ndash; Slider main container &ndash;&gt;-->
<!--                                    <div class="swiper-container">-->
<!--                                        &lt;!&ndash; Additional required wrapper &ndash;&gt;-->
<!--                                        <div class="swiper-wrapper">-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-1.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/1.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-2.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/2.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-3.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/3.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-4.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/4.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- ...::: End Company Logo Display Section :::... -->

        <span th:replace="~{common::footer}"></span>


        <!-- material-scrolltop button -->
        <button class="material-scrolltop" type="button"></button>
    </main>

    <!-- Global Vendor, plugins JS -->

    <!-- JS Files
    ============================================ -->
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>

    <!--Plugins JS-->
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.appear.min.js"></script>
    <script src="assets/js/plugins/jquery.nice-select.js"></script>
    <script src="assets/js/plugins/venobox.min.js"></script>
    <script src="assets/js/plugins/jquery.waypoints.js"></script>
    <script src="assets/js/plugins/images-loaded.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/counter.js"></script>
    <script src="assets/js/plugins/ajax-mail.js"></script>
    <script src="assets/js/plugins/material-scrolltop.js"></script>

    <!-- Minify Version -->
    <!-- <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script> -->

    <!--Main JS (Common Activation Codes)-->
    <script src="assets/js/main.js"></script>

</body>

</html>
